<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  percent: number
  color1: string
  color2: string
  round?: boolean
  customStyle?: string
}>()

const i2c = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'

const customBtoa = (str: string) => {
  var output = ''
  var position = 0
  var block, charCode;
  var map = i2c

  while (str.charAt(position) || (map = '=', position % 1)) {
    charCode = str.charCodeAt(position += 3 / 4);
    if (charCode > 0xFF) {
      throw 'The string contains characters outside of the Latin1 range';
    }
    block = block! << 8 | charCode;
    output += map.charAt(63 & block >> 8 - position % 1 * 8);
  } return output;
}

const svgImage = computed(() => {
  const data = `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" fill="none"><circle cx="50" cy="50" r="37" stroke="${props.color1}" stroke-width="13" /><circle cx="50" cy="50" r="37" stroke="${props.color2}" stroke-width="13" stroke-dasharray="${2 * 3.1415 * (100 - 26) / 2 * (props.percent / 100)}, 1000" stroke-linecap="${props.round ? 'round' : ''}" /></svg>`

  return 'data:image/svg+xml;base64,' + customBtoa(data)
})
</script>

<template>
  <image
    class="circle"
    :style="customStyle"
    mode="widthFix"
    :src="svgImage"
  />
</template>

<style lang="less" scoped>
.circle {
  width: 100%;
  height: 100%;

  transform: rotate(-90deg)scaleY(-1);
}
</style>